<style type="text/css">
.layui-table-cell {
	height: auto;
	line-height: 28px;
}
</style>
<div class="layui-card">
	<div class="layui-card-body">
		<table class="layui-hide" id="demo"></table>
	</div>
</div>
<script type="text/html" id="typeTpl">
	{{# if (d.type=== 1) { }}  
		<span style="color: red;">+  {{d.amount}}</span>   
	{{# } else if(d.type=== 2 ||d.type=== 3 || d.type=== 4) { }}  
		<span style="color: green;">-  {{d.amount}}</span>    
	{{# } }}
</script>
<script type="text/html" id="recordTypeTpl">
	{{# if (d.type=== 1) { }}  
		<span style="color: red;">入库</span>   
	{{# } else if(d.type=== 2 ) { }}  
		<span style="color: green;">出库</span>    
{{# } else if(d.type=== 3 ) { }}  
		<span style="color: green;">售出</span>    
{{# } else if(d.type=== 4 ) { }}  
		<span style="color: green;">领用</span>    
	{{# } }}

</script>
<script>

    layui.use(['form', 'table', 'util', 'admin'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;

        var records = '${records}';
        

        //渲染表格
         table.render({
            elem: '#demo',
            data: JSON.parse(records),
            page: false,
            cols: [[
                {type: 'numbers', title: '序号'},
                {field: 'shopName', sort: false, title: '门店名称'},
                {field: 'amount', sort: false, title: '数量(件)',templet: '#typeTpl'},
                {field: 'type', sort: false, title: '类型', templet: '#recordTypeTpl'},
                {
                    sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                },
            ]]
        }); 
    })
